import React from 'react';
import { render } from 'react-dom';

import { Select, Button } from 'antd';

import { WebTool } from '../lib/webtool';


const { Option } = Select;


const children = [];
// for (let i = 10; i < 36; i++) {
//   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
// }

export class MainOptionComponent extends React.Component {
    constructor(){
        super();

        this.initData();
        this.getData();
    }

    initData() {
        WebTool.get('/main/getWantedItems', data => {
            data.forEach(item => {
                children.push(<Option key={item.name}>{item.name}</Option>);
            });
        });
    }

    state = {
        vals : []
    };

    add = ()=>{
        WebTool.post('/main/saveIWant', { items: this.state.vals }, data => {
            WebTool.success('Save success.');
        });
    };

    getData = ()=>{
        WebTool.get('/main/getIWant', data => {
            let list = (data||[]).map(item=>item.keyName);
            this.setState({vals: list});
        });
    }

    render() {
        return (
            <div> 
                <h3 style={{ textAlign: "center" }}>I want</h3>
                Choose items:

                <Select
                    mode="tags"
                    size="large"
                    placeholder="Please select"
                    value={this.state.vals}
                    onChange={vals=>this.setState({vals:vals})}
                    style={{ width: '100%' }}
                >
                    {children}
                </Select>
                <Button type="primary" onClick={this.add}>add</Button>
            </div>
        );
    };
}
